<template>
	<view class="container" :style="{ height: windowHeight + 'px' }">
		<u-navbar title-color="#fff" :background="navBackground" :border-bottom="false" style="position: fixed;z-index: 100;" :is-back="false" :title="title"></u-navbar>
		<image class="certification-header" src="@/static/images/certification/image-certification-header.png" mode="aspectFill"></image>
		<view class="certification-content">
			<block v-if="status == 1">
				<view class="certification-text">实名认证成功</view>
				<view class="certification-icon success"><text class="suifont sui-shouye3 sui-iconfontduihaocopy"></text></view>
				<image class="certification-image" src="@/static/images/certification/image-certification-success.png" mode="aspectFit"></image>
				<view class="certification-btn" @tap.stop="backToOrigin">返 回</view>
			</block>
			<block v-else>
				<view class="certification-text">实名认证失败</view>
				<view class="certification-icon "><text class="suifont sui-shouye3"></text></view>
				<image class="certification-image" src="@/static/images/certification/image-certification-fail.png" mode="aspectFit"></image>
				<view class="certification-btn" @tap.stop="backToCertification">重 试</view>
			</block>
		</view>
		<view class="certification-bottom">信息加密处理，全面保障您的个人信息安全</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			windowHeight: null,
			status: -1,
			navBackground: {
				background: 'rgba(255,255,255,0)'
			}
		};
	},
	onShow() {
		this.refreshUserInfo()
	},
	computed: {
		title() {
			if (this.status == -1) {
				return '认证中';
			} else if (this.status == 1) {
				return '认证成功';
			} else {
				return '认证失败';
			}
		}
	},
	onLoad(optiions) {
		this.status = optiions.status;
	},
	onShow() {
		const systemInfo = uni.getSystemInfoSync();
		this.windowHeight = systemInfo.windowHeight;
	},
	methods: {
		backToCertification() {
			this.navigateBack();
		},
		backToOrigin() {
			this.navigateBack({ delta: 2 });
		}
	}
};
</script>

<style lang="scss">
.container {
	background-color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.certification-header {
	width: 750rpx;
	margin-top: calc(-100rpx + var(--status-bar-height));
	height: 408rpx;
}
.certification-bottom {
	height: 30rpx;
	font-size: 24rpx;
	font-weight: 400;
	color: rgba(151, 151, 151, 1);
	position: fixed;
	bottom: calc(30rpx + var(--safe-area-inset-bottom));
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.certification-content {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin-top: 48rpx;
	.certification-text {
		height: 64rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
		display: flex;
		justify-content: center;
	}
	.certification-icon {
		margin-top: 3rpx;
		width: 104rpx;
		height: 104rpx;
		background: rgba(204, 204, 204, 1);
		border-radius: 104rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		&.success{
			background:linear-gradient(180deg,rgba(237,79,93,1) 0%,rgba(251,122,142,1) 100%);
		}
		.suifont {
			color: #fff;
			font-size: 64rpx;
		}
	}
	.certification-image {
		width: 550rpx;
		height: 336rpx;
		margin-top: 50rpx;
	}
	.certification-btn {
		width: 400rpx;
		height: 80rpx;
		background: linear-gradient(180deg, rgba(237, 79, 93, 1) 0%, rgba(251, 122, 142, 1) 100%);
		border-radius: 40rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 100rpx;
	}
}
</style>
